<div class="container">
  <form class="form-signin" (submit)="signin()" #signInForm="ngForm">
    <h2 class="form-signin-heading">登&nbsp;&nbsp;&nbsp;&nbsp;录</h2>
    <label for="inputEmail" class="sr-only">邮箱</label>
    <input
      type="email"
      id="inputEmail"
      name="email"
      class="form-control"
      placeholder="邮箱"
      email="true"
      required
      autofocus
      [(ngModel)]="signinForm.email"
      #email="ngModel"
    >
    <!--当email是有效的 当email是干净的，就会影藏-->
    <div *ngIf="email.invalid && (email.dirty || email.touched)"
         class="alert alert-danger">
      <div *ngIf="email.errors.required">
        邮箱必填
      </div>
      <div *ngIf="email.errors.email">
        邮箱无效
      </div>
    </div>
    <div *ngIf="err_message" class="alert alert-danger">
      {{err_message}}
    </div>
    <!--
    Angular 表单双向绑定会为绑定的元素提供一些特殊的类名
    -->
    <label for="inputPassword" class="sr-only">密码</label>
    <input
      type="password"
      id="inputPassword"
      name="password"
      class="form-control"
      placeholder="密码"
      minlength="6"
      maxlength="18"
      required
      [(ngModel)]="signinForm.password"
      #password="ngModel"
    >
    <div *ngIf="password.invalid && (password.dirty || password.touched)"
         class="alert alert-danger">
      <div *ngIf="password.errors.required">
        密码必填
      </div>
      <div *ngIf="password.errors.minlength">
        密码最小为6
      </div>
    </div>
    <button [disabled]="!signInForm.form.valid" class="btn btn-lg btn-primary btn-block" type="submit">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
  </form>
  <p class="info"><a routerLink="/signup">无账号，请点击注册</a></p>
</div>
